<template>
 <div class="home-page">
	<div class="header">数据更新截止时间：{{ currentTime }}</div>
	<div class="flow-wrap">
		<div class="step">
		   <div class="step-title">营收</div>

		   <div class="step-item" style="left:50px;top:60px;">需求</div>
		   <div class="step-item" style="left:250px;top:60px;">订单编制</div>
		   <div class="step-item" style="left:450px;top:20px;">费项</div>
		   <div class="step-item" style="left:450px;top:100px;">产品</div>
		   <div class="step-item" style="left:900px;top:60px;">订单起租</div>

		   <div class="step-link" style="left:114px;top:42px;" @click="$router.push({name:'biz-lal'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 站址周边场租水平提示
		   </div>
		   <div class="step-link" style="left:680px;top:50px;" @click="$router.push({name:'biz-prc'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 产品与资源一致性检查
		   </div>

		   <div class="step-line" style="left:130px;top:74px;width:110px;"></div>
		   <div class="step-line" style="left:325px;top:74px;width:55px;"></div>

		   <div class="step-line" style="left:380px;top:35px;width:60px;"></div>
		   <div class="step-line" style="left:380px;top:115px;width:60px;"></div>
		   <div class="step-line verline" style="left:380px;top:36px;height:80px"></div>

		   <div class="step-line" style="left:530px;top:35px;width:60px;"></div>
		   <div class="step-line" style="left:530px;top:115px;width:60px;"></div>
		   <div class="step-line verline" style="left:590px;top:36px;height:80px"></div>


		   <div class="step-line verline" style="left:485px;top:135px;height:70px;"></div>
		   <div class="step-line-arrow to_top" style="left:481px;top:130px;"></div>

		   <div class="step-line" style="left:590px;top:74px;width:300px;"></div>
		   <div class="step-line verline" style="left:935px;top:95px;height:405px;"></div>
		   <div class="step-line-arrow to_top" style="left:931px;top:92px;"></div>
		   <div class="step-line" style="left:975px;top:74px;width:35px;"></div>
		   <div class="step-line verline" style="left:1010px;top:74px;height:600px;"></div>
		   <div class="step-line-arrow to_right" style="left:240px;top:71px;"></div>

		   <div class="step-line-arrow to_right" style="left:440px;top:32px;"></div>
		   <div class="step-line-arrow to_right" style="left:440px;top:112px;"></div>
		   <div class="step-line-arrow to_right" style="left:890px;top:71px;"></div>

		</div>
		<div class="step">
		   <div class="step-title">工程</div>

		   <div class="step-item" style="left:250px;top:60px;">立项设计</div>
		   <div class="step-item" style="left:350px;top:60px;">实施</div>
		   <div class="step-item" style="left:450px;top:60px;">验收</div>
		   <div class="step-item" style="left:550px;top:60px;">完工交维</div>
		   <div class="step-item" style="left:650px;top:60px;">运维</div>

		   <div class="step-link" style="left:355px;top:35px;" @click="$router.push({name:'biz-emc'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 工程物资一致性检查
		   </div>
		   <div class="step-link" style="left:490px;top:125px;" @click="$router.push({name:'biz-psr'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 项目状态实时获取
		   </div>

		   <div class="step-line" style="left:325px;top:74px;width:16px;"></div>
		   <div class="step-line" style="left:425px;top:74px;width:16px;"></div>
		   <div class="step-line" style="left:525px;top:74px;width:16px;"></div>

		   <div class="step-line verline" style="left:285px;top:-55px;height:105px;"></div>
		   <div class="step-line verline" style="left:385px;top:95px;height:140px;"></div>

		   <div class="step-line-arrow to_bottom" style="left:281px;top:48px;"></div>
		   <div class="step-line-arrow to_top" style="left:381px;top:92px;"></div>

		   <div class="step-line-arrow to_right" style="left:340px;top:71px;"></div>
		   <div class="step-line-arrow to_right" style="left:440px;top:71px;"></div>
		   <div class="step-line-arrow to_right" style="left:540px;top:71px;"></div>
		</div>
		<div class="step">
		   <div class="step-title">资产</div>

		   <div class="step-item" style="left:350px;top:90px;">采购</div>
		   <div class="step-item" style="left:450px;top:40px;">转资</div>
		   <div class="step-item" style="left:450px;top:90px;">结算</div>
		   <div class="step-item" style="left:550px;top:40px;">资源维护</div>

		   <div class="step-link" style="left:420px;top:125px;" @click="$router.push({name:'biz-mc'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 采购、入库、付款单据匹配检查
		   </div>
		   <div class="step-link" style="left:630px;top:45px;" @click="$router.push({name:'biz-os'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 资源占用状态实时获取
		   </div>
		   <div class="step-link" style="left:630px;top:75px;" @click="$router.push({name:'biz-resource'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 资源打标业务状态查询
		   </div>

		   <div class="step-line verline" style="left:285px;top:-55px;height:160px;"></div>
		   <div class="step-line verline" style="left:485px;top:-55px;height:85px;"></div>

		   <div class="step-line" style="left:285px;top:104px;width:55px;"></div>
		   <div class="step-line" style="left:425px;top:104px;width:16px;"></div>
		   <div class="step-line" style="left:525px;top:54px;width:16px;"></div>

		   <div class="step-line-arrow to_bottom" style="left:481px;top:30px;"></div>
		   <div class="step-line-arrow to_right" style="left:340px;top:101px;"></div>
		   <div class="step-line-arrow to_right" style="left:440px;top:101px;"></div>
		   <div class="step-line-arrow to_right" style="left:540px;top:51px;"></div>

		</div>
		<div class="step">
		   <div class="step-title">成本</div>

		   <div class="step-item" style="left:250px;top:60px;">合同</div>
		   <div class="step-item" style="left:380px;top:60px;">场地费</div>
		   <div class="step-item" style="left:510px;top:60px;">维护费</div>
		   <div class="step-item" style="left:640px;top:60px;">发电费</div>
		   <div class="step-item" style="left:770px;top:60px;">维系费</div>
		   <div class="step-item" style="left:900px;top:60px;">电费</div>

		   <div class="step-link" style="left:340px;top:100px;" @click="$router.push({name:'biz-lal'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 站址周边场租水平提示
		   </div>
		   <div class="step-link" style="left:860px;top:100px;" @click="$router.push({name:'biz-or'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 订单不及时风险校验
		   </div>

		   <div class="flow-lendge" style="left:1030px;top:30px;">
				<div class="lendge-item" style="color:#bab8b8;">图例：</div>
				<div class="lendge-item"><img class="imgico" src="~@/assets/img/normal.png"/>流程正常</div>
				<div class="lendge-item"><img class="imgico" src="~@/assets/img/warning.png"/>流程异常</div>
				<div class="lendge-item"><img class="imgico" src="~@/assets/img/error.png"/>流程断开</div>
		   </div>
		</div>
		<div class="step">
		    <div class="step-title offset15">三集中</div>

		    <div class="step-item lgbtn" style="left:250px;top:60px;" @click="$router.push({name:'biz-oa'})">集中操作关联查询展示</div>
		    <div class="step-item lgbtn" style="left:510px;top:60px;" @click="$router.push({name:'biz-oa'})">集中操作系统自动审核</div>
		    <div class="step-item lgbtn" style="left:770px;top:60px;" @click="$router.push({name:'biz-oa'})">集中出账</div>

		    <div class="step-link" style="left:520px;top:15px;" @click="$router.push({name:'biz-ptzc'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 客户提前退租的赔偿金额校验
		    </div>
		    <div class="step-link" style="left:520px;top:40px;" @click="$router.push({name:'biz-arc'})">
			 <img class="imgico" src="~@/assets/img/normal.png"/>
			 场地费(场地租金)自动稽核
		    </div>

		    <div class="step-line" style="left:975px;top:74px;width:35px;"></div>
		    <div class="step-line-arrow to_left" style="left:975px;top:71px;"></div>
		</div>
	</div>
</div>
</template>

<script>
  export default {
        data() {
          return {
             querycount:0
          }
        },
        created() {
           console.log('-----');
           this.queryPageCount('*');
        },
        mounted() {},
        methods: {
           queryPageCount(scene) {
             try {
               const r = await this.$http({
                 url: this.$http.adornBizUrl('/log/queryStatistics'),
                 method: 'post',
                 data: this.$http.adornData('param=' + JSON.stringify({scene:scene}), false),
                 headers: {
                   'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
                 }
               })
               console.log(r.data);
               if(r.data.data && r.data.data.length >0){
                   var result = r.data.data[0];
                   console.log(result.per);
               }
             } catch (e) {
               console.log(e)
             } finally {
            }
          }
        }
  }
</script>

<style>
.home-page{
	position:relative;
	width:100%;
	border-right: 1px solid #f4f4f4;
    background: #fff;
}
.home-page > .header{
	/* height:30px;
	line-height:30px;
	font-size:12px;
	background:#eaeaea;
	border-bottom: 1px solid #c7c7c7;
	text-align:center; */
}

.home-page > .flow-wrap{
	overflow:auto;
}

.flow-wrap > .step{
    position:relative;
    width:100%;
	min-width:1120px;
	height:150px;
	border-bottom:1px dashed #bababa;
}

.step .step-title{
	position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 30px;
    font-size: 13px;
	text-align: center;
    font-weight: bold;
    line-height: 20px;
    background: #c7eaf6;
    padding: 60px 5px;
}

.step-title.offset15{
	padding-top: 50px;
}

.step-item{
    position: absolute;
    height: 28px;
    min-width: 70px;
    line-height: 28px;
    font-size: 12px;
    background: #d93d3d;
    border: 1px solid #831717;
    color: #fff;
    text-align: center;
    border-radius: 3px;
    padding: 0 10px;
	cursor:default;
}

.step-item:hover{
	background:#c90101;
}

.step .flow-lendge{
	position:absolute;
	width:80px;
}

.step .step-link{
	position:absolute;
	font-size:12px;
	cursor:pointer;
}

.step .step-link:hover{
   color:#4390ea;
}


.step-link .imgico{
	width:16px;
	height:16px;
	margin-right: 0px;
    margin-top: -4px;
}

.flow-lendge > .lendge-item{
   font-size:12px;
   height:24px;
   line-height:24px;
}

.lendge-item .imgico{
	width:16px;
	height:16px;
	margin-right: 5px;
    margin-top: -4px;
}

.step-item.lgbtn{
	width:200px;
	cursor:pointer;
}

.step-item.lgbtn:hover{
	background:#fff;
	color:red;
	font-weight:550;
}

.step-line{
    position: absolute;
	height:1px;
	border-bottom:1px solid #666;
}

.step-line.verline{
	width:1px;
	border-bottom:none;
	border-left:1px solid #666;
}

.step-line-arrow{
	position:absolute
}
.step-line-arrow.to_top {
    width: 0;
    height: 0;
    border-bottom: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.step-line-arrow.to_bottom {
    width: 0;
    height: 0;
    border-top: 8px solid #666;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}
.step-line-arrow.to_left {
    width: 0;
    height: 0;
    border-right: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}
.step-line-arrow.to_right {
    width: 0;
    height: 0;
    border-left: 8px solid #666;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
}

</style>

<script>
  export default {
    data () {
      return {
        currentTime: '2020-09-01 00:00:00',
		icoType:'normal' //warning,error
      }
    },
    created () {
		this.setCurrentTime()
    },
    computed: {
    },
    methods: {
		dateFormat (date) {
          const timeDate = new Date(date.getTime() + (8*3600*1000))
          const timeDateString = timeDate.toJSON()
          return timeDateString.replace('T', ' ').slice(0, 19)
        },
		setCurrentTime(){
			this.currentTime = this.dateFormat(new Date())
		}
    }
  }
</script>
